<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane :label="item.label" :name="item.renderKey" v-for="item in renderList" :key="item.renderKey">
      <component :is="item.component"/>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { ref,reactive, defineAsyncComponent,markRaw} from 'vue'
import type { TabsPaneContext } from 'element-plus'
interface renderProps{
  label?: string;
  renderKey?: string;
  component: Function
}
const activeName = ref('Fibonacci')
const renderList = markRaw([
  {
    label:'斐波那契',
    renderKey:'Fibonacci',
    component: defineAsyncComponent(() => import('./views/Fibonacci.vue'))
  },
  {
    label:'居中布局',
    renderKey:'position',
    component: defineAsyncComponent(() => import('./views/Position.vue'))
  },
  {
    label:'select组件编写',
    renderKey:'select',
    component: defineAsyncComponent(() => import('./views/Select.vue'))
  },
  {
    label:'Proxy',
    renderKey:'request',
    component: defineAsyncComponent(() => import('./views/Request.vue'))
  },
  {
    label:'去重与合并',
    renderKey:'DuplicateRemoval',
    component: defineAsyncComponent(() => import('./views/DuplicateRemovals.vue'))
  }
])

const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event)
}
</script>
<style>
</style>
